<template>
  <div>
    <div class="topbar">
      <div class="warp topbar-warp">
        <div class="topbar-left">欢迎来到叩丁狼积分商城</div>
        <ul class="topbar-right">
          <li class="li-login">
            <img class="li-login-img" :src="userInfo.headImg" alt="" />

            <span class="li-login-user">用户名：{{ userInfo.nickName }}</span>
          </li>
          <li>我的积分：：{{ userInfo.coin }}</li>
          <li>获取积分</li>
          <li>叩丁狼官网</li>
          <li class="cart-btn topbar-login" v-if="isLogined">
            <img src="../assets/img/cart.png" alt="" />
            <span>购物车</span>
            <strong>{{ cartTotal }}</strong>
          </li>
          <li class="topbar-login" v-else @click="changIsShowModal(true)">
            登录
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { WeixinLoginAPI } from "@/request/api";
export default {
  computed: {
    ...mapState({
      //用户登录状态
      isLogined: (state) => state.loginStatus.isLogined,
      //获取用户信息
      userInfo: (state) => state.userInfo.userInfo,
      cartTotal: (state) => state.userInfo.cartTotal,
    }),
  },
  methods: {
    ...mapMutations({
      changIsShowModal: "showModal/changIsShowModal",
      changeisLogined: "loginStatus/changeisLogined",
      initUserInfo: "userInfo/initUserInfo",
    }),
    ...mapActions({
      asyncShowToast: "showToast/asyncShowToast",
      asyncChangeUserInfo: "userInfo/asyncChangeUserInfo",
    }),
  },
  created() {
    //等待router加载完后获取路径上的数据
    this.$router.onReady(async () => {
      let pathCode = this.$route.query.code;
      //地址栏有就发送请求
      if (pathCode) {
        let res = await WeixinLoginAPI({
          code: pathCode,
        });
        //扫码成功
        if (res.code == 0) {
          //1提示登录成功
          this.asyncShowToast({
            isshow: true,
            title: "微信扫码登录成功!",
            type: "success",
          });
          //2储存token
          localStorage.setItem("x-auth-token", res["x-auth-token"]);
          //更新登录状态
          this.changeisLogined(true);
          //清除地址栏上的code
          this.$router.push(this.$route.path);
          //更新用户信息
          this.asyncChangeUserInfo();
        } else if (res.code == 400) {
          //400失效
          this.asyncShowToast({
            isshow: true,
            title: "请重新扫码!",
            type: "danger",
          });
          //打开登录框
          this.changIsShowModal(true);
        } else if (res.code == 407) {
          //提示用户绑定手机号
          this.asyncShowToast({
            isshow: true,
            title: "请再进行一次手机号登录!",
            type: "danger",
          });
          //2.自动打开登录框
          this.changeisShowLoginModal(true);
          //3.存储uuid 为了login.vue时在再使用 进行关联
          localStorage.setItem("uuid", res.uuid);
          //4.清除地址栏中的code （为了避免刷新又重新发起请求，此处将code删除）
          this.$router.push(this.$route.path);
        }
      } else {
        let token = localStorage.getItem("x-auth-token");
        this.changeisLogined(Boolean(token));
        if (token) {
          //已登录
          //根据token重新请求用户信息
          this.asyncChangeUserInfo();
        } else {
          // 未登录,初始化vuex中用户信息
          this.initUserInfo();
        }
      }
    });
  },
  watch: {
    "$route.path": {
      handler(newVal, oldVal) {
        let mytoken = localStorage.getItem("x-auth-token");
        this.changeisLogined(Boolean(mytoken));
      },
    },
  },
};
</script>

<style lang="less" scoped>
.topbar {
  background: #242b39;
  color: #fffefe;
  .topbar-warp {
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    .topbar-left {
      font-weight: 300;
    }
    .topbar-right {
      font-weight: 300;
      display: flex;

      li {
        padding: 0 20px;
        &.li-login {
          .li-login-img {
            vertical-align: middle;
            width: 23px;
            height: 22px;
            border-radius: 13px;
          }
          .li-login-user {
            font-size: 14px;
          }
        }
      }
      .topbar-login {
        background-color: #0a328e;
      }
      .cart-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        img {
          width: 20px;
          height: 19px;
        }
        span {
          margin: 0 5px;
        }
        strong {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          background-color: #fd604d;
          line-height: 20px;
          text-indent: 6px;
        }
      }
    }
  }
}
</style>